<%@ page import="com.surelution.projects.crm.GasTypeCategory" %>
<%@ page import="com.surelution.projects.crm.Market" %>
<%@ page import="com.surelution.projects.crm.MemberCard" %>
<%@ page import="com.surelution.projects.crm.GasTypeRaw" %>
<%@ page import="com.surelution.projects.crm.MarketGasSale" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
		<resource:carousel />
        <g:javascript library="jquery" plugin="jquery"/>
        <r:require module="jquery-ui"/>
        <r:layoutResources/>
		<resource:dateChooser />
		<script type="text/javascript" src="${resource(dir:'js/datechooser',file:'datechooser.js')}"></script>
        <g:set var="entityName" value="${message(code: 'market.label', default: 'Market')}" />
        <title><g:message code="default.show.label" args="[entityName]" /></title>
		<script type="text/javascript">
			function g(o){return document.getElementById(o);}
			function HoverLi(m,n){
				g('tb_'+m).className="on";
				g('tbc_'+m).className="dis";
				g('tb_'+n).className="off";
				g('tbc_'+n).className="undis";
			}
		</script>
    </head>
    <body>
        <div class="nav">
            <span class="menuButton"><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></span>
            <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
            <span class="menuButton"><g:link class="search" controller="marketTracking" action="search" id="${marketInstance.id}"><g:message code="marketTrackingList.label" /></g:link></span>
            <span class="menuButton"><g:link class="search" controller="memberCard" action="search" id="${marketInstance.id}"><g:message code="memberCardList.label" /></g:link></span>
        </div>
        <div class="body">
            <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
            </g:if>
            <div class="title">
            	${marketInstance.name}
            </div>
			<div class="leftContent1" >
				<div class="contentTitle">基础信息
            		<g:if test="${marketInstance.isLocked==false }">
                    	<g:link action="edit" id="${marketInstance.id}" class="editCss" style="color:#275790;">编辑</g:link>
					</g:if>
				</div>
				<div class="dialog2">
					<table style="margin:0 10px;width:400px;">
	                    <tbody>
		                    <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.type.label" default="Type" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "type.title")}</td>
	                            
	                        </tr>
	                    
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.area.label" default="area" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "area.areaName")}</td>
	                        </tr>
	                    
	                    	 
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.station.label" default="station" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "station.shortName")}</td>
	                        </tr>
	                        
	                     	<tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.marketType.label" default="marketType" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "marketType.type")}(${marketInstance?.cardType})</td>
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.address.label" default="Address" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "address")}</td>
	                            
	                        </tr>
	
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.manager.label" default="manager" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "manager")}(${marketInstance?.managerTel})</td>
	                            
	                        </tr>
	                    
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.firstSaleTime.label" default="firstSaleTime" />:</td>
	                            
	                            <td valign="top" class="value">
	                            	<g:formatDate format="yyyy年MM月dd日" date="${marketInstance.firstSaleTime}"/>
	                            </td>
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.startTime.label" default="startTime" />:</td>
	                            
	                            <td valign="top" class="value">
	                            	<g:formatDate format="yyyy年MM月dd日" date="${marketInstance.cardMarketTime}"/>
	                            </td>
	                        </tr>
	
	                        <tr class="prop">
	                            <td valign="top" colspan="2" >
	                            	<input type="button" onclick="showMarketTrack()" value="添加客户回访信息" />
                					<input type="button" onclick="showCard()" value="添加关联卡号" />
                				</td>
	                        </tr>
	                        
	                    </tbody>
	                </table>
				</div>
				<div id="nav1" >
		        	<ul style="cursor:pointer;">
						<li class="on" id="tb_1" onclick="HoverLi(1,2);" >地图</li>
						<li class="off" id="tb_2" onclick="HoverLi(2,1);">详情</li>
					</ul>
	            	<div id="tbc_1" class="dis">
	            			<div id="smallMap"></div>
	            	</div>
	            	<div id="tbc_2" class="undis" >
			        	<table style="width:300px;" >
		                   <tbody>
		                   	<tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.provideSite.label" default="provideSite" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "provideSite")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.requirement.label" default="requirement" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "requirement")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.carePoint.label" default="carePoint" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "carePoint")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.betweenDistance.label" default="betweenDistance" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "betweenDistance")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.gasPredictSale.label" default="gasPredictSale" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "gasPredictSale")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.fuelPredictSale.label" default="fuelPredictSale" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "fuelPredictSale")}</td>
	                            
	                        </tr>
	                        
	                        <tr class="prop">
	                            <td valign="top" class="name1"><g:message code="market.discountNum.label" default="discountNum" />:</td>
	                            
	                            <td valign="top" class="value">${fieldValue(bean: marketInstance, field: "discountNum")}</td>
	                        </tr>
		                   </tbody>
		                </table>
		            </div>	
				</div>
			</div>
			<div class="rightContent" style="padding:0 10px;">
				<div class="contentTitle">
            		${year}年消费账单
            	</div>
            	<div>
	            	<p style="font-size:14px;color:black;">
	   		        	<g:form action="show">
	   		        		<g:hiddenField name="id" value="${marketInstance.id}" />
					    	查询月份： <g:datePicker name="month" precision="month" value="${month}" />
					    	<span class="menuButton" style="margin-right:5px;"><g:actionSubmit value="${message(code: 'default.button.search.label', default: '查询')}" action="show"/></span><br>
					    	<label style="font-size:14px;color:black;font-family:楷体;">
	          				${year}年${mm}月消费明细账单<br>
	          			</label>
					    </g:form>
	           		</p>
            	</div>
				<div style="width:350px;height:300px;border:3px solid gray;overflow: auto;">
					<table>
	                    <thead>
	                        <tr>
	                            <g:sortableColumn property="id" title="${message(code: 'cardConsumeRaw.id.label', default: 'Id')}" />
	                        
	                            <g:sortableColumn property="cardNo" title="${message(code: 'cardConsumeRaw.cardNo.label', default: 'cardNo')}" />
	                        
	                            <g:sortableColumn property="type" title="${message(code: 'cardConsumeRaw.goodsType.label', default: 'goodsType')}" />
	
	                            <g:sortableColumn property="number" title="${message(code: 'cardConsumeRaw.volume.label', default: 'volume')}" />
	
	                            <g:sortableColumn property="list" title="${message(code: 'cardConsumeRaw.list.label', default: 'list')}" />
	                        </tr>
	                    </thead>
	                    <tbody>
	                    <g:each in="${cardConsumeSales}" status="i" var="m">
	                        <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
	                            <td><g:link action="show" controller="memberCard" id="${m[0].id}">${i+1}</g:link></td>
	                            
	    						<td style="text-align:center;"><label title="${m[0].cardNo}">${m[0].cardNo[0 .. m[0].cardNo.length() - 1]}</label></td>
	
	                            <td style="text-align:center;">${m[2].name}</td>
	
	                            <td style="text-align:center;"><g:formatNumber number="${m[1]}" type="number" maxFractionDigits="2" /></td>
	
	                            <td><g:link action="search" controller="cardConsumeRaw" id="${m[0].id}">详情</g:link></td>
	                        </tr>
	                    </g:each>
	                    </tbody>
			        </table>
			    </div>
			    
				<div style="width:350px;padding:0 5px;height:140px;">
					<label class="contentTitle" style="font-size:16px;color:#black;font-family:楷体;font-weight:normal;">
	           			累计开卡数:${cardSums }张,${years}<g:message code="market.annualSaleNumber.label" default="annualSaleNumber" />${formatNumber(number: marketInstance.annualSaleNumber,maxFractionDigits:2)}(吨)<br>
	           		</label>
					<img alt="chart" src="${grailsApplication.config.chartAPI.location}?cht=lxy&chxt=x,y&chf=bg,f,efefef&chdl=${'购油量(吨)'.encodeAsURL()}&chco=FF0000&chs=350x100&chd=t:0,8.3,16.6,24.9,33.2,41.5,49.8,58.1,66.4,74.9,83,91.3,99.6|${numList}&chxt=x,y&chxl=0:|0|1月|2月|3月|4月|5月|6月|7月|8月|9月|10月|11月|12月|1:|0|20|40|60|80|100">
				</div>
				
			</div>
			<script type="text/javascript">
		        $(function() {
		    		$( "#divlog" ).dialog({autoOpen:false, modal:true, height:300, width:450});
		    		$( "#gasRecord" ).dialog({autoOpen:false, modal:true, height:300, width:450});
		    		$( "#marketTarck" ).dialog({autoOpen:false, modal:true, height:500, width:500});
		    		$( "#memberCard" ).dialog({autoOpen:false, modal:true, height:320, width:420});
		    	});
		
		    	function showDialog() {
		    		$( "#divlog" ).dialog("open");
		        }
		    	function showSaleRecord() {
		    		$( "#gasRecord" ).dialog("open");
		        }
		    	function showMarketTrack() {
		    		$( "#marketTarck" ).dialog("open");
		        }
		    	function showCard() {
		    		$( "#memberCard" ).dialog("open");
		        }
	        </script>
	        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
			<script type="text/javascript">
				var map;
				function initMap() {
					var lat='${fieldValue(bean: marketInstance, field: "latitude")}';
					var lng='${fieldValue(bean: marketInstance, field: "longitude")}';
					map = new BMap.Map("smallMap");
					var center = new BMap.Point(lng, lat);
					map.setMapType(BMAP_NORMAL_MAP);
					map.centerAndZoom(center, 15);
					map.addControl(new BMap.NavigationControl());
					map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
					addMarker(lng,lat);
				}			

				function addMarker(x, y){
					var myIcon = new BMap.Icon(
							"http://api.map.baidu.com/img/markers.png" , 
							new BMap.Size(23, 25), 
							{offset: new BMap.Size(32, 32),size:new BMap.Size(23, 25)}
					);
					var point = new BMap.Point(x, y);
					var marker = new BMap.Marker(point, {icon: myIcon}); 
					map.addOverlay(marker);
				}
				
				$(document).ready(function() {
					initMap();
				 });
			</script>
			
			<div id="memberCard" title="请添加关联卡号！" >				
            <g:uploadForm method="post" controller="memberCard" >
				<g:hiddenField name="market.id" value="${marketInstance?.id}" />
                <table>
                   <tbody>
                   	<tr class="prop">
                           <td valign="top" class="name">
                               <label for="market"><g:message code="memberCard.market.label" default="Market" /></label>
                           </td>
                           <td valign="top" class="value ${hasErrors(bean: memberCardInstance, field: 'market', 'errors')}">
                               ${fieldValue(bean: marketInstance, field: "name")}
                           </td>
                       </tr>
                        
                       <tr class="prop">
                           <td valign="top" class="name">
                               <label for="accountAcceptDate"><g:message code="memberCard.accountAcceptDate.label" default="Account Accept Date" /></label>
                           </td>
                           <td valign="top" class="value ${hasErrors(bean: memberCardInstance, field: 'accountAcceptDate', 'errors')}">
                               <richui:dateChooser name="accountAcceptDate" locale="zh" format="yyyy-MM-dd" value="${memberCardInstance?.accountAcceptDate}"/>
                           </td>
                       </tr>
                   
                       <tr class="prop">
                           <td valign="top" class="name">
                               <label for="cardNo"><g:message code="memberCard.cardNo.label" default="Card No" /></label>
                           </td>
                           <td valign="top" class="value ${hasErrors(bean: memberCardInstance, field: 'cardNo', 'errors')}">
                               <g:textField name="cardNo" value="${memberCardInstance?.cardNo}" />(请输入16位卡号)
                           </td>
                       </tr>
                        
                       <g:if test="${MemberCard.findAllByMarketAndIsMaster(marketInstance,true)==[]}">
                       <tr class="prop">
                           <td valign="top" class="name">
                               <label for="isMaster"><g:message code="memberCard.isMaster.label" default="Is Master" /></label>
                           </td>
                           <td valign="top" class="value ${hasErrors(bean: memberCardInstance, field: 'isMaster', 'errors')}">
                               <g:checkBox name="isMaster" value="${memberCardInstance?.isMaster}" />
                           </td>
                       </tr>
                       </g:if>
                            
                       <tr class="prop">
             				<td colspan="2" style="padding:0 0 0 180px;">
             					<g:actionSubmit name="create" class="save" action="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
             				</td>
                     	</tr>
                        
                     </tbody>
                 </table>
            </g:uploadForm>
			</div>            
			
            <div id="marketTarck"  title="请添加回访记录！" >
            <g:form action="save" controller="marketTracking" >
                <div class="dialog2" >
      				<g:hiddenField name="market.id" value="${marketInstance?.id}" />
                    <table style="width:450px;">
                        <tbody>
                        
                          <tr class="prop">
                              <td valign="top" class="name">
                                  <label for="market"><g:message code="marketTracking.market.label" default="Market" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'market', 'errors')}">
                                  ${fieldValue(bean: marketInstance, field: "name")}
                              </td>
                          </tr>
                            
                          <tr class="prop">
                              <td valign="top" class="name">
                                  <label for="handleTime"><g:message code="marketTracking.handleTime.label" default="Handle Time" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'handleTime', 'errors')}">
                                  <g:datePicker name="handleTime" precision="minute" value="${marketTrackingInstance?.handleTime}"  />
                              </td>
                          </tr>
                            
                          <tr class="prop">
                              <td valign="top" class="name">
                                  <label for="reason"><g:message code="marketTracking.reason.label" default="Reason" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'reason', 'errors')}">
                                  <g:select name="reason.id" from="${com.surelution.projects.crm.MarketTrackingReason.list()}" optionKey="id" optionValue="title"  value="${marketTrackingInstance?.reason?.id}"  />
                              </td>
                          </tr>
                          
                          <tr class="prop">
                              <td valign="top" class="name">
                                  <label for="description"><g:message code="marketTracking.description.label" default="Description" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'description', 'errors')}">
                                  <g:textArea name="description" rows="1" cols="20" value="${marketTrackingInstance?.description}" />
                              </td>
                          </tr>
                            
                          <tr class="prop">
                              <td valign="top" class="name">
                                <label for="needFollowup"><g:message code="marketTracking.needFollowup.label" default="Need Followup" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'needFollowup', 'errors')}">
                                  <g:checkBox name="needFollowup" value="${marketTrackingInstance?.needFollowup}" />
                              </td>
                          </tr>
                      
                          <tr class="prop">
                              <td valign="top" class="name">
                                  <label for="preTracking"><g:message code="marketTracking.preTracking.label" default="Pre Tracking" /></label>
                              </td>
                              <td valign="top" class="value ${hasErrors(bean: marketTrackingInstance, field: 'preTracking', 'errors')}">
                              	<g:select name="preTracking.id" noSelection="['':'']" from="${com.surelution.projects.crm.MarketTracking.findAllByMarketAndNeedFollowup(marketInstance,true).sort{-it.handleTime.time}}" optionKey="id" optionValue='${{it.handler.username + "," + it.handleTime.format("yyyy-MM-dd")}}'/>
                              </td>
                          </tr>
                            
                         <tr class="prop">
               				<td colspan="2" style="padding:0 0 0 380px;">
               					<g:actionSubmit name="create" class="save" action="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
               				</td>
                       	</tr>
                        
                      </tbody>
                    </table>
                </div>
            </g:form>
            </div>

			<div id="divlog" title="请上传图片！" style="display:none;">				
            <g:uploadForm method="post" controller="marketPicture" >
				<g:hiddenField name="market.id" value="${marketInstance?.id}" />
                <div class="dialog2" style="padding:5px 0;">
                    <table>				
                        <tbody>
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="title"><g:message code="market.name.label" default="name" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: marketPictureInstance, field: 'title', 'errors')}">
                                    ${fieldValue(bean: marketInstance, field: "name")}
                                </td>
                            </tr>
                            
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="title"><g:message code="marketPicture.title.label" default="Title" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: marketPictureInstance, field: 'title', 'errors')}">
                                    <g:textField name="title" value="${marketPictureInstance?.picture?.title}" />
                                </td>
                            </tr>
                            
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="description"><g:message code="marketPicture.description.label" default="Description" /></label>
                                </td>
                                <td valign="top" class="value ${hasErrors(bean: marketPictureInstance, field: 'description', 'errors')}">
                                    <g:textField name="description" value="${marketPictureInstance?.picture?.description}" />
                                </td>
                            </tr>
                        
                            <tr class="prop">
                                <td valign="top" class="name">
                                    <label for="title"><g:message code="marketPicture.picture.label" default="Picture" /></label>
                                </td>
                                <td valign="top" >
                                	<g:field type="file" name="pictureFile"/>
                                </td>
                            </tr>
                          <tr class="prop">
                  				<td colspan="2" style="padding:0 0 0 180px;">
                  					<g:actionSubmit name="create" class="save" action="save" value="${message(code: 'default.button.create.label', default: 'Create')}" />
                  				</td>
                          </tr>
                          
                        </tbody>
                    </table>
                </div>
            </g:uploadForm>
			</div>
			
			 <div id="picList" >			
		        <div id="pic" >
				<g:if test="${marketInstance.pictures}">
		        	<g:each in="${marketInstance.pictures}" var="picture">
		        		<g:if test="${picture }">
					 		<a href="${resource(dir:'marketPicture/show')}/${picture?.id}" title="${picture?.picture?.title}"><img style="height:150px;width:${150*picture?.picture?.width/picture?.picture?.height}px;" src="${resource(dir:'marketPicture/name')}/${picture?.id}"/></a>
					 	</g:if>
		        	</g:each>
				 </g:if>
			        <img style="height:150px;width:150px;" src="${resource(dir:'images/')}/waiting.jpg" onclick="showDialog()"/>
		        </div>
			</div>
		</div>
        
    </body>
</html>
